<template>
	<view class="container">
		<view class="login">
			<view class="loginTitle">账号密码登录</view>
			<uni-forms ref="login" label-position="top" :modelValue="formData" :rules="rules">
				<uni-forms-item label="用户名" name="user_name">
					<uni-easyinput type="text" v-model="formData.user_name" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="user_password">
					<uni-easyinput type="password" v-model="formData.user_password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="captcha">
					<view class="captcha">
						<uni-easyinput type="text" v-model="formData.captcha" placeholder="请输入验证码" />
						<view class="captchaImg" @click="getCaptcha">
							<image :src="captcha" mode=""></image>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="loginBtn" @click="submitForm" type="primary" :loading="btnLoading">登 录</button>
			<view class="tips">
				<navigator class="a" url="./findpwd">找回密码</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import admin from '@/api/admin';
export default {
	data() {
		return {
			btnLoading: false,
			captcha: '',
			formData: {
				user_name: '',
				user_password: '',
				captcha: '',
				captcha_id: ''
			},
			rules: {
				user_name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写用户名'
						},
						{
							minLength: 3,
							maxLength: 20,
							errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					validateTrigger: 'submit'
				},
				user_password: {
					rules: [
						{
							required: true,
							errorMessage: '请填写密码'
						},
						{
							minLength: 6,
							maxLength: 20,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					validateTrigger: 'submit'
				},
				captcha: {
					rules: [
						{
							required: true,
							errorMessage: '请填写验证码'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad() {
		this.getCaptcha();
	},
	methods: {
		submitForm() {
			this.$refs.login.validate().then((res) => {
				this.btnLoading = true;
				admin
					.login(this.formData)
					.then((data) => {
						if (data.ret == 200) {
							this.btnLoading = false;
							uni.showToast({
								title: '登录成功'
							});
							uni.setStorageSync('access_token', data.data.access_token);
							uni.setStorageSync('times', data.data.expire_at);
							setTimeout(() => {
								uni.hideToast();
								uni.switchTab({
									url: '../index/index'
								});
							}, 1000);
						} else {
							this.btnLoading = false;
							this.getCaptcha();
						}
					})
					.catch(() => {
						this.btnLoading = false;
						this.getCaptcha();
					});
			});
		},
		getCaptcha() {
			admin.captcha({}).then((res) => {
				this.captcha = res.data.captcha_img;
				this.formData.captcha_id = res.data.captcha_id;
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	box-sizing: border-box;
	width: 100vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding-top: 5vh;
	background: #fff;

	.login {
		width: 92vw;
		.loginTitle {
			font-size: 40rpx;
			font-weight: bolder;
			margin-bottom: 100rpx;
		}

		.loginBtn {
			background: $uni-primary;
			margin-top: 100rpx;
		}
		.tips {
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
			.a {
				font-size: 26rpx;
				text-decoration: underline;
				color: #999;
			}
		}
		.is-input-border {
			border: none;
			border-bottom: 1px solid;
			border-radius: 0;
		}
		.uni-forms-item__label {
			padding: 0 !important;
			height: 42rpx;
			line-height: 42rpx;
		}
		.captcha {
			display: flex;
			justify-content: space-between;
			.captchaImg {
				cursor: pointer;
				width: 175rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				overflow: hidden;
				border-radius: 6rpx;
				margin-left: 20rpx;
				image {
					width: 175rpx;
					height: 70rpx;
					object-fit: cover;
				}
			}
		}
	}
}
</style>
